<template>
  <view
      class="u-selectColumn"
      @touchmove.stop.prevent="() => {}"
      @click.stop.prevent="() => {}"
      :style="[customStyle]"
  >
    <scroll-view
        :scroll-y="true"
        :style="{ height: $u.addUnit(height) }"
    >
      <u-cell-group>
        <u-cell-item
            v-for="(item, index) in options"
            :arrow="false"
            :borderBottom="false"
            :title="item.label"
            :key="index"
            :title-style="{
						color: getTitleColor(item, index),
					}"
            @click="cellClick(item, index)"
        >
          <u-icon
              v-if="isActiveItem(item.value) && selectedIcon"
              :name="selectedIcon"
              :color="activeColor"
              size="32"
          />
        </u-cell-item>
      </u-cell-group>
    </scroll-view>
  </view>
</template>

<script lang="js">
/**
 * select-column 列选择
 * @property {String | Number} selectValue 当前选中项的value值
 * @property {Array[Object]} options 选项数据
 * @property {Number} max 最大可选数
 * @property {Number} currentIndex 当前选中下标
 * @property {String | Number} height 选择内容的高度(内容超出将会滚动)（默认auto）
 * @property {String} selectedIcon 选中icon
 * @property {String} activeColor 激活时左边文字和右边对勾图标的颜色
 * @example <u-select-column v-model:selectValue="selectItems" :options="renderOption"></u-select-column>
 */
export default {
  name: "u-select-column",
  options: {
    // 微信小程序中 options 选项
    multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
    styleIsolation: "shared",  //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
    // addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
    virtualHost: true,  //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
  props: {
    // 当前选中项的value值
    selectValue: {
      type: [Number, String, Array],
      default: ""
    },
    // 选项数据
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    // 最大可选数
    max: {
      type: Number,
      default: 1
    },
    // 当前选中下标
    currentIndex: {
      type: Number,
      default: 0
    },
    // 下拉弹窗的高度
    height: {
      type: [Number, String],
      default: "auto"
    },
    // 选中icon
    selectedIcon: {
      type: String,
      default: ""
    },
    // 激活时左边文字和右边对勾图标的颜色
    activeColor: {
      type: String,
      default: "#3875FF"
    },
    // 自定义样式，对象形式
    customStyle: {
      type: Object,
      default() {
        return {};
      }
    },
  },
  emits: ["update:selectValue", "update:currentIndex", "clickItem"],
  data() {
    return {
      inactiveColor: "#262626" // 未激活时左边文字和右边对勾图标的颜色
    };
  },
  methods: {
    // 是否全部选中
		isAllSelected(value) {
			return this.isEqualArray(this.options.map(item => item.value), [...this.selectValue, value])
		},
    // 比较两个数组一个是否是另一个的子集
    isEqualArray(arr1, arr2) {
      return arr1.every((item) => arr2.includes(item));
    },
    isActiveItem(value) {
      if (typeof value === 'string' && value.startsWith('_$all$_')) {
				return this.isAllSelected(value);
			}
      return Array.isArray(this.selectValue)
          ? this.selectValue.includes(value)
          : this.selectValue === value
    },
    getTitleColor(item, index) {
      if (item.disabled) {
        return '#BFBFBF'
      }
      return this.isActiveItem(item.value) || ( !this.selectedIcon && index === this.currentIndex )
          ? this.activeColor
          : this.inactiveColor;
    },
    // cell被点击
    cellClick(item, currentIndex) {
      if (item.disabled) {
        return;
      }
      if (typeof item?.value === 'string' && item?.value.startsWith('_$all$_') && this.isAllSelected(item.value)) {
				this.$emit('clickItem', item, currentIndex);
				this.$emit("update:currentIndex", currentIndex);
				this.$emit("update:selectValue", []);
				return;
			}
      let activeId = this.selectValue?.slice?.();
      // 如果能多选，但是值又不是数组时强行转换为数组
      if (this.max > 1 && !Array.isArray(this.selectValue)) {
        activeId = this.selectValue ? [this.selectValue] : []
      }
      if (this.max > 1 && Array.isArray(activeId)) {

        const index = activeId.indexOf(item.value);

        if (index !== -1) {
          activeId.splice(index, 1);
        } else if (activeId.length < this.max) {
          activeId.push(item.value);
        }
      } else {
        activeId = item.value;
      }

      this.$emit('clickItem', item, currentIndex);
      this.$emit("update:currentIndex", currentIndex);
      this.$emit("update:selectValue", activeId);
    }
  }
};
</script>
